<template>
  <view class="proto">
    <view class="proto-left" @click="handleClick(item)">
      <image class="proto-cover" mode="aspectFit" :src="item.cover" />
    </view>
    <view class="proto-right">
      <view @click="handleClick(item)">
        <text class="proto-title">{{ item.title }}</text>
      </view>
      <view class="dpr-start-start py-1">
        <view v-if="item.showcase_sales_term || item.fans_term">
          <nut-tag v-if="item.showcase_sales_term" plain style="height: 14px; font-size: 10px; margin-right: 3px"
            >橱窗销量≥<text style="font-weight: bold">{{ item.showcase_sales_term }}</text
            >可领</nut-tag
          >
          <nut-tag v-if="item.fans_term" style="height: 14px; font-size: 10px" plain
            >粉丝≥ <text style="font-weight: bold">{{ item.fans_term }}</text
            >可领</nut-tag
          >
        </view>
        <nut-tag v-else plain style="height: 14px; font-size: 10px"> 不限领 </nut-tag>
      </view>
      <view class="proto-sales">
        <text
          >累计销量 <text>{{ item.sales }}</text></text
        >
        <text
          >样品库存 <text style="color: #29a8ff">{{ item.stock }}</text></text
        >
      </view>
      <view class="proto-price">
        <view class="proto-price-tag"
          >¥
          <text class="proto-price-value">
            <money :value="item.price" />
          </text>
        </view>
        <view></view>
      </view>
      <view class="dpr-center-sb pr-1">
        <view>
          <nut-tag class="commission-ratio" :color="'#fff4f3'" round text-color="#FA2400">
            佣金
            <text style="font-weight: bold"> {{ item.commission_ratio }}% </text>
          </nut-tag>
        </view>
        <nut-button type="primary" style="height: 32px" @click="handleClick(item)"
          >赚 ¥<money style="font-weight: bold" :value="item.commission"
        /></nut-button>
      </view>

      <!--      <view class="proto-shop">-->
      <!--        <nut-icon name="shop3" size="12" />-->
      <!--        <text class="proto-shop-name"-->
      <!--          >{{ item.shop_name }} <nut-icon size="9" name="right"-->
      <!--        /></text>-->
      <!--      </view>-->
    </view>
  </view>
</template>
<script lang="ts">
export default {
  name: 'ProtoCard',
};
</script>
<script setup lang="ts">
import './index.less';
import { PropType } from 'vue';
import { ProtoType } from '@/api/proto';
import Money from '@/components/money/index.vue';

const emit = defineEmits(['item-click', 'delete-item']);

const handleClick = (proto: ProtoType) => {
  emit('item-click', proto);
};

const props = defineProps({
  item: {
    type: Object as PropType<ProtoType>,
    default: null,
  },
});
</script>
